<template>
	<div class="root-div">
		
		<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+listCurID" :style="'height:calc(100vh - '+CustomBar+'px - 20px)'" scroll-with-animation="true" enable-back-to-top="true">
		  <view class="cu-bar bg-white search fixed">
		    <view class="search-form round">
				<div v-for="item in selectUser_show">
					<u-avatar :src="item" mode="square" size="60"></u-avatar>
				</div>
				<u-search :show-action="false" :clearabled="true" placeholder="搜索" v-model="keyword" @search="search"></u-search>
		    </view>
		  </view>
		  
		  <u-radio-group wrap="true">
			  <block v-for="(item, index) in list">
			  	<view :class="'padding indexItem-'+list[index]">{{index}}</view>
			  		<view class="cu-list menu-avatar no-padding">
			  		  <u-radio
			  		  	@change="radioChange()" 
			  		  	v-for="(titem, tindex) in item"
			  		  	:name="titem.allItems.UserId"
			  		  	:disabled="item.checked"
			  		  >
			  		  	<view class="cu-item u-pl-10">
			  		  		<image :src='titem.allItems.avatarUrl' class='cu-avatar round lg'></image>
			  		  		<view class="content u-pl-10">
			  		  		  <view class="text-grey">
			  		  			<text class="text-abc">{{titem.allItems.NickName}}</text>
			  		  		  </view>
			  		  		  <view class="text-gray text-sm">
			  		  			{{titem.allItems.UserId}}
			  		  		  </view>
			  		  		</view>
			  		  	</view>
			  		  </u-radio>
			  		</view>
			  	</view>
			  </block>				
		  </u-radio-group>
			
		  <view class="indexBar" style="height:calc(110vh)">
		    <view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove="tMove">
		  	<view class="indexBar-item" v-for="(item, index) in indexs" :id="index" @touchstart="getCur" @touchend="setCur">{{indexs[index]}}</view>
		    </view>
		  </view>
		</scroll-view>
		
		<div style="text-align: center;margin-top: 40rpx;">
			<u-button type="primary" size="medium" shape="square" @click="ConfirmSelect">{{btnText}}</u-button>
		</div>

	</div>
</template>

<script>
export default {
	data() {
		return {
			StatusBar: '',
			CustomBar: '',
			hidden: true,
			list: [],
			listCur: {},
			boxTop: 0,
			barTop: 0,
			movableY: 0,
			listCurID: '',
			indexs: [],
			selectUser: [],// 选中的用户id
			selectUser_show: [],// 选中的用户头像
			type: '',// team表示是从团队进来的
			TeamOrunid: '',// 团队唯一ID
			SceneAssetsId: '',// 定制D
			keyword: '',//关键字
			btnText: '确定 (0/1)',// 按钮文本

		};
	},
	
	onLoad(options) {
			
		if(this.isNotNull(options.selectUser)){
			this.selectUser.push(options.selectUser);
			// 初始化按钮文本
			this.btnText = "确定 ("+ this.selectUser.length +"1)";
		}
		
		// 定制ID
		this.SceneAssetsId = options.SceneAssetsId;
		console.log("定制ID=", this.SceneAssetsId);
		
		this.initUsersData();
		
		
	},
	
	mounted() {
		// 获取系统状态栏信息
		wx.getSystemInfo({
		  success: e => {
			this.StatusBar = e.statusBarHeight;
			let custom = wx.getMenuButtonBoundingClientRect();
			this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
		  }
		})
	},
	
	methods: {

		/**
		* 初始化用户数据（获取场景拥有者的所有队员）
		*/
		async initUsersData(){
			const userInfo = uni.getStorageSync('userInfo');
			let result = await this.$u.api.unifyRequest({
				userId: userInfo.userId,
				nickName: userInfo.nickName,
				appid: 'CustomMade',
				wf_num: 'R_CustomMade_BL005',
				SceneAssetsId: this.SceneAssetsId,
				searchStr: this.keyword,
				loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
			});
			this.list = result.data
			for(let index in this.list){
				this.indexs.push(index)
				let arr = this.list[index]
				for(let key in arr){
					if(this.selectUser.indexOf(arr[key].allItems.UserId) > -1){
						this.list[index][key].checked = true
						this.selectUser_show.push(this.list[index][key].allItems.avatarUrl)
					}
				}
			}
		},
		
		/**
		* 选中
		*/
		radioChange(event) {
			this.selectUser = event
			this.resetArrByUserids()
		},

		/**
		* 选中人员后确定返回人员列表
		*/
		ConfirmSelect(){
			let userObj;
			for(let index in this.list){
				let arr = this.list[index]
				for(let key in arr){
					if(this.selectUser.indexOf(arr[key].allItems.UserId) > -1){
						userObj = {
							userid:this.list[index][key].allItems.UserId,
							nickName:this.list[index][key].allItems.NickName,
							avatarUrl:this.list[index][key].allItems.avatarUrl
						}
					}
				}
			}
			uni.$emit("saveUserObj", userObj)
			this.goBack()
		},

		/**
		* 根据用户id串（selectUser）将用户头像放到显示的数组中（selectUser_show）
		*/
		resetArrByUserids(){
			this.selectUser_show = []
			for(let index in this.list){
				let arr = this.list[index]
				for(let key in arr){
					if(this.selectUser.indexOf(arr[key].allItems.UserId) > -1){
						this.selectUser_show.push(this.list[index][key].allItems.avatarUrl)
					}
				}
			}
			
			// 修改确定按钮文本
			this.btnText = "确定 ("+ this.selectUser_show.length +"1)";
		},

		/**
		* 搜索
		*/
		async search(event) {
			this.initUsersData();
		},


		// 获取文字信息
		getCur(e) {
		  this.hidden = false
		  this.listCur = this.list[e.target.id]
		},

		setCur(e) {
		  this.hidden = true
		  this.listCur = this.listCur
		},
		
		// 滑动选择Item
		tMove(e) {
			let y = e.touches[0].clientY,
			offsettop = this.boxTop,
			that = this;
			// 判断选择区域,只有在选择区才会生效
			if (y > offsettop) {
			  let num = parseInt((y - offsettop) / 20);
			  this.listCur = that.list[num]
			};
		},

		// 触发全部开始选择
		tStart() {
		  this.hidden = false
		},

		// 触发结束选择
		tEnd() {
		  this.hidden = true
		  this.listCurID = this.listCur
		},
		
		indexSelect(e) {
			let that = this;
			let barHeight = this.barHeight;
			let list = this.list;
			let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
			for (let i = 0; i < list.length; i++) {
			  if (scrollY < i + 1) {
				  this.listCur = list[i]
				  this.movableY = i * 20
				return false
			  }
			}
		},
	},
}
</script>

<style scoped>
	.root-div {
		background-color: #fafafa;
		font-size: 28rpx;
		color: #333;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		--red: #e54d42;
		--orange: #f37b1d;
		--yellow: #fbbd08;
		--olive: #8dc63f;
		--green: #39b54a;
		--cyan: #1cbbb4;
		--blue: #0081ff;
		--purple: #6739b6;
		--mauve: #9c26b0;
		--pink: #e03997;
		--brown: #a5673f;
		--grey: #8799a3;
		--gray: #aaa;
		--black: #333;
		--white: #fff;
		--gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
		--gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
		--gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
		--gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
		--gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
		--gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
	}
	
	.indexes {
		position: relative;
	}
	
	scroll-view {
		display: block;
		width: 100%;
	}
	
	* {
		margin: 0;
	}
	
	.padding {
		padding: 30rpx;
	}
	
	view, scroll-view, swiper, button, input, textarea, label, navigator, image {
		box-sizing: border-box;
	}
	
	view {
		display: block;
	}
	
	.cu-list.menu-avatar {
		overflow: hidden;
	}
	
	.cu-list>.cu-item {
		transition: all 0.6s ease-in-out 0s;
		transform: translateX(0rpx);
	}
	
	.cu-list.menu-avatar>.cu-item {
		position: relative;
		display: flex;
		padding-right: 30rpx;
		height: 140rpx;
		background-color: #fff;
		justify-content: flex-end;
		align-items: center;
	}
	
	.round {
		border-radius: 5000rpx;
	}
	.cu-avatar {
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		background-color: #ccc;
		color: #fff;
		white-space: nowrap;
		position: relative;
		width: 64rpx;
		height: 64rpx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
	}
	
	.cu-avatar.lg {
		width: 96rpx;
		height: 96rpx;
		font-size: 2em;
	}
	.cu-list.menu-avatar>.cu-item>.cu-avatar {
		position: absolute;
		left: 30rpx;
	}
	
	.cu-list.menu-avatar>.cu-item .content {
		position: absolute;
		left: 146rpx;
		width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx);
		line-height: 1.6em;
	}
	
	.cu-list.menu-avatar>.cu-item .content>view:first-child {
		font-size: 30rpx;
		display: flex;
		align-items: center;
	}
	.text-grey, .line-grey, .lines-grey {
		color: var(--grey);
	}
	
	.text-sm {
		font-size: 24rpx;
	}
	.text-gray, .line-gray, .lines-gray {
		color: var(--grey);
	}
	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20rpx 20rpx 20rpx 60rpx;
		display: flex;
		align-items: center;
	}
	
	.indexBar .indexBar-box {
		width: 40rpx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
	}
	
	.indexBar-item {
		flex: 1;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #888;
	}
	
	.cu-bar {
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100rpx;
		justify-content: space-between;
	}
	.cu-bar.fixed, .nav.fixed {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}
	.bg-white {
		background-color: #fff;
		color: #666;
	}
	.round {
		border-radius: 5000rpx;
	}
	.cu-bar .search-form {
		background-color: #f5f5f5;
		line-height: 64rpx;
		height: 64rpx;
		font-size: 24rpx;
		color: #666;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 20rpx;
	}
	.cu-bar .action {
		display: flex;
		align-items: center;
		height: 100%;
		justify-content: center;
		max-width: 100%;
	}
	.cu-bar .action:last-child {
		margin-right: 30rpx;
	}
	.cu-bar .search-form+.action {
		margin-right: 20rpx;
	}
	
	.shadow-blur {
		position: relative;
	}
	.cu-btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 30rpx;
		font-size: 28rpx;
		height: 64rpx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0rpx, 0rpx);
		margin-right: initial;
	}
	.bg-gradual-green {
		background-image: var(--gradualGreen);
		color: #fff;
	}
	/* button {
		-webkit-tap-highlight-color: transparent;
		background-color: #f8f8f8;
		border-radius: 5px;
		box-sizing: border-box;
		color: #000;
		cursor: pointer;
		display: block;
		font-size: 18px;
		line-height: 2.55555556;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		padding-left: 14px;
		padding-right: 14px;
		position: relative;
		text-align: center;
		text-decoration: none;
	} */
	
	.indexItem-A {
		padding-top: 130rpx;
	}
	
	.cu-item {
		position: relative;
		display: flex;
		padding-right: 30rpx;
		height: 140rpx;
		background-color: #fff;
		justify-content: flex-end;
		align-items: center;
		transition: all 0.6s ease-in-out 0s;
		transform: translateX(0rpx);
	}
	
	.cu-list {
		background-color: white;
		padding-left: 20rpx;
	}
	
</style>
